<template>
  <el-select
    @change="selectedValueChanged"
    v-model="value"
    placeholder="Select"
    style="width: 240px"
  >
    <el-option v-for="r in roles" :key="r.rid" :label="r.rname" :value="r.rid">
      <span style="float: left">{{ r.rname }}</span>
      <span style="float: right; color: var(--el-text-color-secondary); font-size: 13px">
        {{ r.rinfo }}
      </span>
    </el-option>
  </el-select>
</template>

<script lang="js" setup>
import { usePersonStore } from '@/stores/person'
import { useRoleStore } from '@/stores/role'
import { storeToRefs } from 'pinia'

import { ref, defineProps, watch } from 'vue'
const value = ref(2)

const personStore = usePersonStore()
const { form } = storeToRefs(personStore)
// 定义属性
// 属性的数据流是单向的，组件不能改变自己的自定义属性的值
const props = defineProps({
  roleId: {
    type: Number,
    default: 2,
  },
})

watch(
  () => props.roleId,
  (newVal, oldVal) => {
    value.value = newVal
  },
  // { deep: true }, 如果是immediate，则只能使用简单类型属性，不能使用deep: true
  // 监听到属性初始化的动作
  { immediate: true },
)

// const props = defineProps({
//   name: String,
//   age: {
//     type: Number,
//     default: 10,
//     reqiured: true,
//     validator: (val) => val > 10,
//   },
// })

const roleStore = useRoleStore()

const { roles } = storeToRefs(roleStore)

const selectedValueChanged = (value) => {
  form.value.roleid = value
}

roleStore.findall()
// 10ms
//value.value = props.roleId
</script>
